<!DOCTYPE html>
<html>
<head>
    <title>Energy Level Diagram</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = 500;
        canvas.height = 320;

        // Background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Frame
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.strokeRect(50, 30, 400, 220);

        // Text Style
        ctx.fillStyle = 'black';
        ctx.font = "22px 'Courier New'";
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        // Labels for energy levels
        const labelX = 65;
        const n2_Y = 85;
        const n1_Y = 195;
        ctx.fillText("n = 2", labelX, n2_Y);
        ctx.fillText("n = 1", labelX, n1_Y);

        // Energy Level Lines
        ctx.lineWidth = 2.5;
        
        // n=1 level
        ctx.beginPath();
        const y1 = n1_Y;
        ctx.moveTo(140, y1);
        ctx.lineTo(270, y1);
        ctx.stroke();

        // n=2 level (three segments)
        const y2 = n2_Y;
        // Segment 1
        ctx.beginPath();
        ctx.moveTo(140, y2);
        ctx.lineTo(210, y2);
        ctx.stroke();
        // Segment 2
        ctx.beginPath();
        ctx.moveTo(250, y2);
        ctx.lineTo(320, y2);
        ctx.stroke();
        // Segment 3
        ctx.beginPath();
        ctx.moveTo(360, y2);
        ctx.lineTo(430, y2);
        ctx.stroke();

        // Figure Caption
        ctx.font = "20px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'alphabetic';
        ctx.fillText("Fig. 1.14", canvas.width / 2, 290);
    </script>
</body>
</html>